var AgentSearchForm = function () {
  var template = /* html */ `
    <div class="agent-search-form" v-loading.fullscreen.lock="loading">
      <el-form inline>
        <el-form-item label="代理商代码-代理商名称">
          <filter-select clearable class="form-input" :options="customerList" v-model="search.customer" value-field="code" label-field="label"
            value-key="code" style="width:200px;" :filter-method="agentFilterMehod">
          </filter-select>
        </el-form-item>
        <el-form-item label="结算付款方式">
        <el-select filterable clearable v-model="search.paymentWay" style="width:140px">
          <el-option v-for="paymentWay in paymentWayList" :key="paymentWay.value" :value="paymentWay.value" :label="paymentWay.label">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select clearable v-model="search.status" style="width:140px">
            <el-option value="使用"></el-option>
            <el-option value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        paymentWayList: i18n.getDropDown('customer.paymentWayType', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 18, 24]),
        customerList: []
      };
    },

    created: function () {
      this.initDropdown();
    },

    methods: {
      initDropdown: function () {
        this.loading = true;
        var self = this;
        return ajaxRequest('basicData/getCustomerSubCode', {
          type: 1
        }).then(function (customerList) {
          customerList = _.map(customerList, function (customer) {
            var code = customer.customerCode;
            var name = customer.customerName;

            return {
              label: `${code} - ${name}`,
              code: code,
              name: name
            };
          });
          self.customerList = customerList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },

      agentFilterMehod: function (query, option) {
        var filterParams = ['code', 'name'];
        for (var i = 0; i < filterParams.length; i++) {
          var filterParam = filterParams[i];
          var value = _.get(option, filterParam, '');
          if (value === null) {
            value = '';
          }
          if (typeof value === 'string') {
            value = value.toLowerCase();
          }
          if (value.indexOf(query) !== -1) {
            return true;
          }
        }
        return false;
      }
    },

    components: {
      FilterSelect: FilterSelect
    },

    template: template
  };
}();
